<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--以最新的IE版本模式来显示网页-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- css样式格式化 -->
    <link rel="stylesheet" href="css/rest.css">
    <!-- 专门存放图标的css -->
    <link rel="stylesheet" href="css/icon.css">
    <!-- 头部的css -->
    <link rel="stylesheet" href="css/header.css">
    <!-- 首页内容部分的css-->
    <link rel="stylesheet" href="css/index.css"> 
    <title>白熊网站</title>
</head>
<body>
    <!--头部单独写是为了可以提取公共代码，防止重复-->
    <div class="header">
        <div class="header-wapper">
            <a class="logo"><img src="https://www.bearead.com/public/images/logo-headerTop.svg" alt=""> </a>
            <ul class="leftmenu">
                <li>
                    <a>发现</a>
                </li>
                <li>
                    <a>标签库</a>
                </li>
                <li>
                    <a>来签约吧</a><i class="icon icon-sign"></i>
                </li>
            </ul>
            <ul class="rightmenu">
                <li>
                    <a>注册</a>
                </li>
                <li>
                    <a>登录</a>
                </li>
                <li>
                    <a class="btn">
                            <i class="icon icon-pen"></i> 
                            <span>写作中心</span>    
                        </a>
                </li>
            </ul>
        </div>
    </div>
    <!--头部==end-->
	
    <div class="wapper">
		<!-- banner部分 -->
        <div class="content-wapper">
            <a class="banner" href="http://www.baidu.com/"><img src="img/banner.png" alt="banner超链接"></a>
            <div class="banner-shape banner-pre"></div>
            <div class="banner-shape banner-next"></div>
            <div class="banner-nav">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
			</div>
		</div>
		<!-- banner部分==end -->
		<!-- 随机阅读部分 -->
		<div class="content-random">
			<div class="random-layout">
				<div class="random-left">
                    <div>
                        <h3>
                            大家都在看
                        </h3>
                        <a>
                            <span>随机换一批</span>
                            <span>查看全部</span>
                        </a>
                    </div>
					<ul>
						<li>
							<a>
								<img href="" alt="">
								<span>朔月朦胧</span>
							</a>
							<a><span>正剧</span></a>
							<a><span>双男主</span></a>
							<a><span>古风</span></a>
							<a><span>玄幻</span></a>
							<a>
							    <img href="" alt="">
								<span>闭眼狐狸</span>
							</a>
						</li>
						<li>
							<a>
                            	<img href="" alt="">
                            	<span>被恶魔一见钟情的种种下场</span>
                            </a>
                            <a>
								<img href="" alt="">
								<span>慢笙戏语</span>
							</a>
						</li>	
						<li>
                            <a>
								<img href="" alt="">
								<span>桃花染金戈</span>
							</a>
							<a><span>武侠</span></a>
							<a><span>悬疑推理</span></a>
							<a><span>年下</span></a>
							<a><span>古风</span></a>
							<a>
							    <img href="" alt="">
								<span>闻笛</span>
							</a>
                        </li>
						<li>
                            <a>
                            	<img href="" alt="">
                            	<span>你离反攻就差这么点了</span>
                            </a>
                            <a>
								<img href="" alt="">
								<span>一见生欢喜</span>
							</a>
                        </li>
					</ul>
				</div>
				<div class="random-right">
                    <div>
                        <h3>
                            热门标签
                        </h3>
                        <a>
                            <span>题材&口味</span>
                            <span>同人</span>
                        </a>
                    </div>>
                    <div>
                        <a><span>BG</span></a>
                        <a><span>GL</span></a>
                        <a><span>BL</span></a>
                        <a><span>玄幻</span></a>
                        <a><span>架空</span></a>
                        <a><span>古风</span></a>
                        <a><span>都市</span></a>
                        <a><span>微虐</span></a>
                        <a><span>HE</span></a>
                        <a><span>BE</span></a>
                        <a><span>轻松爆笑</span></a>
                        <a><span>民国</span></a>
                        <a><span>轻小说</span></a>
                    </div>
                </div>
			</div>
		</div>
		
	</div>
	
	
</body>
</html>